<!DOCTYPE html>
<html>
<head>
<title>Connect4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	charset="UTF-8">
	
<script src="<?php echo base_url(); ?>assets/js/jquery-2.0.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">	
<style>
	input {
		display: block;
	}
</style>
<script>
	function checkPassword() {
		var p1 = $("#pass1"); 
		var p2 = $("#pass2");
		
		if (p1.val() == p2.val()) {
			p1.get(0).setCustomValidity("");  // All is well, clear error message
			return true;
		}	
		else	 {
			p1.get(0).setCustomValidity("Passwords do not match");
			return false;
		}
	}
</script>
</head> 
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="">Connect4</a>
			</div>
		</div>
	</nav>
	
	<div class="row offset1">
		<h1>Change Password</h1>
	</div>  

	<div class="row offset1">
	<?php 
		if (isset($errorMsg)) {
			echo "<p>" . $errorMsg . "</p>";
		}
	
		echo form_open('account/updatePassword');
		echo form_label('Current Password'); 
		echo form_error('oldPassword');
		echo form_password('oldPassword',set_value('oldPassword'),"required autofocus=\"autofocus\"");
		echo form_label('New Password'); 
		echo form_error('newPassword');
		echo form_password('newPassword','',"id='pass1' required");
		echo form_label('Password Confirmation'); 
		echo form_error('passconf');
		echo form_password('passconf','',"id='pass2' required oninput='checkPassword();'");
		echo "<br><input type=\"submit\" class=\"btn btn-primary\" name=\"submit\" value=\"Change Password\"/>";
		echo form_close();
	?>
	</div>
	
</body>
</html>